<script setup lang="ts">
import { onMounted, reactive, watch } from 'vue';
import { navigateTo } from '@tarojs/taro';
import { getSysImgUrl, isFullDomainName } from '/@/utils/index';
import { QUERY_PHOTO_CAROUSEL_LIST } from '/@/api/modules/base/photo-carousel';

const props = withDefaults(
  defineProps<{
    /**
     * 轮播类型
     * 2-后勤端
     * 3-员工端
     */
    type: 2 | 3;
    /**
     * 是否刷新
     */
    refresh: boolean;
  }>(),
  {
    type: 2,
    refresh: false,
  },
);

const emits = defineEmits<{
  (e: 'refresh'): void;
}>();

const state = reactive<{ active: number; photoCarouselList: AppPhotoCarousel.Dto[] }>({
  active: 0,
  photoCarouselList: [],
});

function goTo(url: string) {
  if (!url) return;
  if (isFullDomainName(url)) {
    window.location.href = url;
  } else {
    navigateTo({ url });
  }
}

function queryList() {
  QUERY_PHOTO_CAROUSEL_LIST({
    comQuery: { page: 1, pageSize: 10 },
    publishLogistics: props.type === 2 ? 1 : undefined,
    publishStaff: props.type === 3 ? 1 : undefined,
  }).then((res) => {
    state.photoCarouselList = res.content || [];
    emits('refresh');
  });
}

onMounted(() => {
  queryList();
});

watch(props, (newProps) => {
  if (newProps.refresh) {
    queryList();
  }
});
</script>

<template>
  <swiper
    v-if="state.photoCarouselList && state.photoCarouselList.length"
    :indicator-dots="true"
    indicator-active-color="#fff"
    :current="state.active"
    :autoplay="true"
    class="home-photo-carousel"
  >
    <swiper-item
      v-for="item in state.photoCarouselList"
      :key="item.id"
      class="home-photo-carousel__swiper-item"
      @click="goTo(item.landingPage)"
    >
      <image class="home-photo-carousel__img" :src="getSysImgUrl(item.fileUrl)" mode="widthFix" />
    </swiper-item>
  </swiper>
</template>

<style lang="scss">
.home-photo-carousel {
  border-radius: 0.4rem;
  height: 300px;
  margin-bottom: 20px;
  overflow: hidden;

  &__swiper-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__img {
    width: 100%;
  }
}
</style>
